<template>
    <div>
        <div class="handle-box" style="margin-top: 0">
          <el-row type="flex" class="row-bg" justify="end">
           <el-button type="primary" icon="el-icon-plus" @click="handleEdit('', {}, false)">新增</el-button>
          </el-row>
        </div>
        <el-table
          :data="tableData"
           show-summary
          style="width: 100%">
          <el-table-column
            prop="name"
            label="类别名称"
            width="150"
            >
          </el-table-column>
          <el-table-column
            prop="neirong"
            label="内容"
            min-width="300">
          </el-table-column>
          <el-table-column
            prop="jiage"
            width="100"
            label="合计（万元）">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" fixed='right'>
            <template slot-scope="scope">
                <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row, false)"
                >编辑</el-button>
                <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
            </template>
           </el-table-column>
        </el-table>

    </div>
</template>
<script>
    export default {
        data() {
            return  {
                tableData: [{
                    name: '资料费',
                    neirong: '自然、生态环境，社会经济情况的数据、图件资料。',
                    jiage: '1',
                },{
                    name: '外业调查、勘测',
                    neirong: '项目概况、项目所在地的水土流失重点防治区划分情况，水土流失防治责任范围，水土流失预测结果，水土保持措施总体布局、主要工程',
                    jiage: '12',
                },{
                    name: '专项工程设计费',
                    neirong: '水土保持投资估算及效益分析、方案专项工程实施保证措施',
                    jiage: '10',
                }]
            }
        }
    }
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>